<template>
  <div class="app-container" >
    <div class="filter-container" align="center">
      <el-form :inline="true" :model="pageInfo" class="demo-form-inline"   align="center">

        <el-form-item label="用户姓名">
          <el-input v-model="pageInfo.username" placeholder="用户姓名" />
        </el-form-item>

        <el-form-item label="性别">
          <el-select v-model="state" placeholder="用户性别" >
            <el-option
              v-for="item in options"
              :key="item.state"
              :label="item.label"
              :value="item.state">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" class="filter-item" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>

        <el-form-item>
          <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
            确认勾选
          </el-button>

          <el-drawer
            :visible.sync="drawer"
            :with-header="true">
            <el-form ref="form" :model="message" label-width="40px">
              <el-form-item label="消息">
                <el-input v-model="message.messages"  style="width: 217px;" ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="onAdd">发送</el-button>
              </el-form-item>
            </el-form>
          </el-drawer>



        </el-form-item>
      </el-form>
    </div>
    <el-table :data="role" border style="width:100%"
              @selection-change="selectionChange"
              stripe>

      <el-table-column
        type="selection"
        align="center"
      >
      </el-table-column>



      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="100">
      </el-table-column>



      <el-table-column label="图片" align="center">
        <template slot-scope="scope">
          <img :src="'/api'+scope.row.path" width="60px" height="60px">
        </template>
      </el-table-column>

      <el-table-column
        prop="username"
        label="用户姓名"
        width="160"
        align="center"
      />

      <el-table-column prop="roleList" label="性别" align="center" :formatter="sta" width="130">
      </el-table-column>

      <el-table-column prop="roleList" label="角色姓名" align="center" :formatter="sta2" width="190">
      </el-table-column>

      <el-table-column
        prop="money"
        label="余额"
        width="140"
        align="center"
      />


<!--      <el-table-column label="操作" align="center">-->
<!--        &lt;!&ndash;                          获取每一次循环时 的元素节点 (v-for) user in users 中的 user    &ndash;&gt;-->
<!--        <template slot-scope="scope">-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="primary" icon="el-icon-edit" circle-->
<!--            @click="handleEdit(scope.$index, scope.row)"-->
<!--          ></el-button>-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="danger"-->
<!--            icon="el-icon-delete" circle-->
<!--            @click="handleDelete(scope.$index, scope.row)"-->
<!--          ></el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->




    </el-table>

    <!--    分页组件-->
    <el-pagination
      background
      :page-size="pageInfo.pageSize"
      :page-sizes="[5, 10, 20, 30]"
      :current-page="pageInfo.pageNum"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>


<script>
import axios from "axios";

export default {
  name: "UserView",
  data() {
    return {
      drawer: false,
      total: 0,
      pageInfo: {
        id:0,
        pageNum: 1,
        pageSize: 5,
        username:'',
      },
      role:[],
      options: [{
        // value: '选项1',
        label: '男',
        state: '1',
      }, {
        // value: '选项2',
        label: '女',
        state: '2',
      } ],
      state: '',
      ids:[],
      message:{
        messages:"",
      },
      userid:"",
      selection:[],

    }

  },
  // 前置执行方法在执行之前    beforeCreate()   axios.post(get)("http://localhost:8080/queryAll").then(...)
  created() { // 这是可以获取data中的数据后  再执行下面的axios
    this.getData()
  },
  methods: {
    sta(row) {
      if (row.state == 1) {
        return '男'
      } else {
        return '女'
      }
    },
    sta2(row){
      var arr=[]
      var roles=row.roleList
      for (const key in roles) {
        arr.push(roles[key].name)
      }
      return arr.join(",")
    },
    sta3(row){
      this.userid=row.id
    },



    // 修改角色
    handleEdit(index, row) {
      // alert(row.id)
      // 使用路由的push方法  跳转到医生信息修改页面
      this.$router.push({ name: 'UserEditView', query: { id: row.id }})
    },


    // 修改每页条数
    handleSizeChange(val) {
      this.pageInfo.pageSize = val
      this.getData()
    },
    // 修改当前页数
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val
      this.getData()
    },
    // 获取数据
    getData() {
      //查询
      var formData = new FormData();
      formData.append("state", this.state)
      for (const arr in this.pageInfo) {
        // console.log(arr)
        // console.log(this.pageInfo[arr])
        formData.append(arr, this.pageInfo[arr])
      }
      axios({
        //获取所有的用户的信息和他们的角色信息
        url: '/api/user/queryAll',
        method: 'post',
        data: formData,
        headers:{"Authorization":"Bearer "+this.$store.state.user.token}
      }).then(res => {
        // console.log(res.data.data.list[0].moduleList)
        // console.log(res.data.data)
        this.role=res.data.data.list
        // console.log(this.role)
        // for (const arr in this.role) {
        //     this.role.name=this.role[arr].roleList.name
        // }
        // // this.doctorInfo = res.data.data.list
        this.total = res.data.data.total


      })
    },
    // 查询
    onSubmit() {
        // alert(this.state)
        // alert(this.pageInfo.username)
      this.pageInfo.pageNum = 1 // 点击查询时  页码重置为1
      this.getData()
    },
    // 确认勾选的用户id
    onAdd() {
      // this.$router.push('/user/UserAddView')
      this.$confirm('是否确认发送消息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        var formData = new FormData();
        formData.append("messages", this.message.messages)
        // console.log(formData)
        for (const Key in this.selection) {
          // console.log(Key)
          // console.log(this.selection[Key].id)
         formData.append("ids", this.selection[Key].id)
        }
        axios({
          url: '/api/messages/addMessages',
          method: 'post',
          data: formData,
          headers:{"Authorization":"Bearer "+this.$store.state.user.token}
        }).then(res => {
          console.log(res.data)
          if (res.data.code == 1) {
            this.$message({
              message: '发送成功',
              type:'success'
            });
            this.$refs.multipleTable.clearSelection();//清除已选
            this.getData()

          }
          else {
            this.$message({
              message: res.data.message,
              type: 'error'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });

    },
    // this.$router.push({name:})
    selectionChange(val){
      this.selection=val
    },


  }


}
</script>

<style scoped>

</style>
